<!--
 * @description  : 市管-无证电子烟信息采集-产品品牌选择
 * @descriptionDetail: 市管-无证电子烟信息采集-产品品牌选择
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2023-07-05 17:57:44
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
      <view class="nav-right-icon">
        <view @tap="handlerSure">
          确定
        </view>
      </view>
    </theme-navbar>
    <!-- #endif -->
    <view>
      <u-search
        class="search-space"
        shape="round"
        :clearabled="true"
        :showAction="true"
        actionText="确定"
        :animation="true"
        placeholder="请输入名称搜索"
        v-model="keyword"
        @custom="handlerSearch"
      ></u-search> 
      <u-gap class="u-gap-sty" :height="$theme.cm_gap_height" :bg-color="$theme.cm_gap_color"></u-gap>
    </view>
    <view class="content u-page u-p-t-30">
      <!-- <mescroll-list
        :i="0"
        :index="0"
        :height="getListViewHeight()"
        :load-data="loadData"
        :initLoad="false"
        ref="mescrollItem0"
      >
        <view slot-scope="d"> -->
      <view v-for="item in productList" :key="item.productUuid">
        <u-row style="border-bottom: 1px solid #e5e5e5; padding: 15px 10px;" @tap="handlerSelectItem(item)">
          <u-col span="10">
            {{ item.productName }}
          </u-col>
          <u-col span="2" style="text-align:right;">
            <u-icon
              name="checkbox-mark"
              :color="$theme.u_type_primary"
              size="38"
              style="margin-right: 10px;"
              v-if="selectedUids.includes(item.productUuid)"
            ></u-icon>
          </u-col>
        </u-row>
      </view>
      <!-- </view> -->
      <!-- </mescroll-list> -->
    </view>
    <view class="space-content"></view>
  </view>
</template>

<script>
import MescrollList from "@/components/mescroll_list.vue";
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
import caseService from "@/service/case/case.service";
import {dateUtils,} from "@/common/util"
export default {
  components: {
    // MescrollList,
  },
  mixins: [MescrollMoreMixin,],
  data() {
    return {
      keyword: "",
      selectedUids: [],     // 选中项的ids
      selectedItems: [],     // 选中项
      isSingle: false, // 是否单选，默认多选
      productList:[],
    };
  },
  onLoad(opt) {
    // 是否单选
    this.isSingle = opt.isSingle;
  },
  watch:{
    keyword(newVal, oldVal) {
      this.$u.debounce(this.loadData, 500);
    },  
  },
  methods: {
    setRightBtns() {
      // 设置右侧标题
      // #ifdef H5-DINGDING
      // 先放开右侧标题
      this.$deviceApi.setRight("确定", () => {
        // 添加日计划操作
        this.handlerSure();
      }, true, true);
      // #endif
    },
    getListViewHeight() {
      let p = (this.$u.sys().windowHeight - 44 - uni.upx2px(90)  - this.$u.sys().statusBarHeight) + "px";
      // #ifdef H5-DINGDING
      p = (this.$u.sys().windowHeight - uni.upx2px(90)  - this.$u.sys().statusBarHeight) + "px";
      // #endif
      return p;
    },
    handlerSearch() {
      let mescroll = this.getMescroll(0);
      mescroll && mescroll.triggerDownScroll();
    },
    
    // 选中
    handlerSelectItem(item) {
      if (this.isSingle) {
        this.selectedUids = [item.productUuid,];
        this.selectedItems = [item,];
        return;
      }
      if (this.selectedUids.includes(item.productUuid)) {
        this.selectedItems = this.selectedItems.filter(it => it.productUuid != item.productUuid);
      } else {
        this.selectedItems.push(item);
      }
      this.selectedUids = [];
      this.selectedItems.forEach(it => this.selectedUids.push(it.productUuid));
    },

    // 列表查询数据
    loadData(page) {
      if (this.$u.test.isEmpty(this.keyword)) return;
      caseService.searchPro(this.keyword).then(res => {
        if(res.success){
          this.productList = res.data;
        }else{
          this.$u.toast(res.msg);
        } 
      }).catch((err) => {
        this.$u.toast(err);
      });
    },
    // 确定
    handlerSure() {
      this.backPrev({
        paramKey: 'brandList',
        param : this.selectedItems,
      });
      this.selectedUids = this.selectedItems = [];   
    },
  },
};
</script>

<style lang="scss" scoped>
.page{
	padding:0;
}
.search-space{
	padding: $cm-search-padding-row $cm-search-padding-column;
	padding-bottom: 6px;
}
.u-gap-sty{
	position: relative;
}

</style>
